import React from 'react'
import PropTypes from 'prop-types'
import { Col, Row } from 'antd'
import { findValueByKey } from 'utils'
import style from './tableCard.less'

const TableCard = ({ blocks, dataSource, cols, rows, type }) => {
  if (type === 'table') {

  } else {
    const CurrentBlock = blocks.map((current, index) => {
      return (
        <Col span={24 / cols} className={index === 0 ? style.firstStyle : index % cols === 0 ? style.firstRowStyle : index < cols ? style.firstColStyle : style.colStyle}>
          <div style={{ display: 'flex' }}>
            <span className={style.spanStyle}>
              {current.title}
            </span>
            <p className={style.pStyle}>
              {dataSource ? current.dictList ? findValueByKey(current.dictList, dataSource[current.key]) : dataSource[current.key] : current.key}
            </p>
          </div>
        </Col>
      )
    })
    const tableData = []
    for (let row = 0; row < rows; row++) {
      const CurrentRow = []
      for (let col = 0; col < cols; col++) {
        if (CurrentBlock.length > 0) {
          CurrentRow.push(CurrentBlock.shift())
        }
      }
      if (CurrentRow.length > 0) {
        const RowData = (
          <Row className={tableData.length % 2 === 0 ? style.evenRowStyle : style.oddRowStyle}>
            {
              CurrentRow
            }
          </Row>
        )
        tableData.push(RowData)
      }
    }
    return (
      <div className={style.divStyle}>
        {
          tableData
        }
      </div>
    )
  }
}

TableCard.PropTypes = {
  dataSource: PropTypes.object,
  blocks: PropTypes.array,
  cols: PropTypes.number,
  rows: PropTypes.number,
  type: PropTypes.string,
}

export default TableCard
